import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';

const FeatureList = [
  {
    title: '原生支持分布式',
    Svg: require('@site/static/img/database.svg').default,
    description: (
      <>
        KiwiDB 自设计伊始就将自身定位为一款分布式数据库，并采用 Multi-Raft 协议进行具体实现，这使得 KiwiDB 具有良好的横向拓展能力，并支持分布式集群部署。
      </>
    ),
  },
  {
    title: '社区驱动发展',
    Svg: require('@site/static/img/community.svg').default,
    description: (
      <>
        数据库是一门工程，需要的是共同的协作而不是单打独斗，很荣幸地，我们有一支足够热情的团队，推动着 KiwiDB茁壮成长。
      </>
    ),
  },
  {
    title: 'Redis 生态友好',
    Svg: require('@site/static/img/future.svg').default,
    description: (
      <>
        承前启后，继往开来，KiwiDB 在结合自身对于分布式数据库理解的基础上，保持着对于 Redis 相关指令与协议的兼容，因此绝大多数架构于 Redis 的服务，可以平滑过渡至 KiwiDB 之上。
      </>
    ),
 },
];

function Feature({Svg, title, description}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}
